@startuml
set separator none
title D - F - Components

top to bottom direction

skinparam {
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
}

hide stereotype

skinparam rectangle<<C>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9a9a9a
  shadowing false
}
skinparam rectangle<<D.F.G>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9a9a9a
  shadowing false
}
skinparam rectangle<<D.F.H>> {
  BackgroundColor #dddddd
  FontColor #000000
  BorderColor #9a9a9a
  shadowing false
}
skinparam rectangle<<D.F>> {
  BorderColor #9a9a9a
  FontColor #9a9a9a
  shadowing false
}

rectangle "==C\n<size:10>[Software System]</size>" <<C>> as C

rectangle "F\n<size:10>[Container]</size>" <<D.F>> {
  rectangle "Group 5" <<group1>> {
    skinparam RectangleBorderColor<<group1>> #cccccc
    skinparam RectangleFontColor<<group1>> #cccccc
    skinparam RectangleBorderStyle<<group1>> dashed

    rectangle "==H\n<size:10>[Component]</size>" <<D.F.H>> as D.F.H
  }

  rectangle "==G\n<size:10>[Component]</size>" <<D.F.G>> as D.F.G
}

C .[#707070,thickness=2].> D.F.G : "<color:#707070>"
C .[#707070,thickness=2].> D.F.H : "<color:#707070>"
@enduml